<template>
  <div class="shopgood-content">
    <Affix>
      <van-tabs v-model="active" color="#fe9a0f" @click="changetab">
        <van-tab title="全部"></van-tab>
        <van-tab title="上架中"></van-tab>
        <van-tab title="下架中"></van-tab>
      </van-tabs>
    </Affix>
    <Affix :offset-top="50" class="affix">
      <van-badge-group :active-key="activeKey" @change="onChange" class="goodtplist">
        <van-badge
          v-for="(item,index) in items"
          :key="index"
          :title="item.className"
          class="tplist"
        />
      </van-badge-group>
    </Affix>
    <div class="goodlist">
      <img v-if="none == true" src="@/assets/img/none.png" class="noneimg">
      <div class="goodlistbox" v-for="(item,index) in list" :key="index">
        <div class="goodlistboxs">
          <div class="goodimg">
            <img :src="item.image?item.image:noneimg">
          </div>
          <div class="gooddesc">
            <p class="goodname">{{ item.productName }}</p>
            <p class="goodsoldnum">月售 {{ item.saleNums }}</p>
            <p class="goodnum" v-if="item.productNums == 1">缺货</p>
            <p class="goodnum" v-if="item.productNums == 2">库存不足</p>
            <p class="goodnum" v-if="item.productNums == 3">库存无限</p>
            <P class="goodmoney">￥{{ item.price }}</P>
          </div>
          <div class="goodlistright" @click="tosetdetail(index)">
            <span>点我编辑</span>
            <van-icon name="arrow" size="0.3rem" color="#fe9a0f" class="righticon"/>
          </div>
        </div>
        <div class="goodlistbottom">
          <div v-if="item.type == 1" @click="Suk_downfood(index)">下架</div>
          <div style="background:#fe9a0f" v-if="item.type == 0" @click="Suk_upfood(index)">上架</div>
        </div>
      </div>
    </div>
    <!-- 下面的是我们的分类管理的悬浮框 -->
    <div class="fixed" @click="tosetclass">
      <div class="fixedimg">
        <img src="@/assets/img/icon_spgl_tjs.png">
      </div>
      <div class="fixedspan">分类管理</div>
    </div>

    <!-- 下面的是我们的新增商品的悬浮框 -->
    <div class="fixed2" @click="toaddnewgood">
      <div class="fixedimg">
        <img src="@/assets/img/icon_spgl_tjs.png">
      </div>
      <div class="fixedspan">新增商品</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      noneimg:require('@/assets/img/none.png'),
      none:false,
      classid:'',
      active: 0,
      activeKey: 0,
      goodstp:0,
      items: [],
      list: []
    };
  },
  beforeCreate: function() {
    //创建前
  },
  activated() {
    // this.menu();
    // this.Suk_getlist();
    // this.Suk_getfoodlist();
    // this.Suk_getfoodlistall()
  },
  created: function() {
    // this.classid = this.items[0].classId,
    // console.log(this.items)
    this.menu();
    this.Suk_getlist();
    this.Suk_getfoodlist();
    // this.Suk_getfoodlistall()
    //创建后
  },
  beforeMount: function() {
    //挂载前
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    // 这里是修改我们的商品的状态
    Suk_updatetype(type,index){
      let that = this;
      console.log(that.list[index].id)
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        type:type,
        id:that.list[index].id
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/product/updateProduct", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.success({
                message:'修改成功！'
              })
              that.Suk_getfoodlist()
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {

            }
          }
        });
    },
    // 下架商品
    Suk_downfood(index) {
      this.Suk_updatetype(0,index)
    },
    // 上架食品
    Suk_upfood(index){
      this.Suk_updatetype(1,index)      
    },
    // Suk_getfoodlistall() {
    //   let that = this;
    //   that.$toast.loading({
    //     message: "加载中..."
    //   });
    //   var Sukdata = {
    //     diningId: localStorage.getItem("myshopid"),
    //   };
    //   console.log(Sukdata);
    //   that.axios
    //     .post(
    //       that.baseUrl + "/product/checkProductList",
    //       that.Qs.stringify(Sukdata),
    //       {
    //         headers: {
    //           "Content-Type": "application/x-www-form-urlencoded"
    //         }
    //       }
    //     )
    //     .then(function(res) {
    //       if (res.request.status === 200) {
    //         if (res.data.meta.code == 200) {
    //           that.list = res.data.data;
    //           that.none = false
    //           that.$toast.clear();
    //         } else if (res.data.meta.code == 501) {
    //           that.none = true
    //           that.list = null
    //           that.$toast.clear();
    //         }
    //       }
    //     });
    // },
    // 查询分类食物
    Suk_getfoodlist() {
      let that = this;
      let classid = that.classid
       if(that.active==0){
         that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        diningId: localStorage.getItem("myshopid"),
        // type: that.goodstp,
        classId:classid
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/product/checkProductList",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
              console.log(res.data, "foodlist");
            if(res.data.meta.code == 501){
              that.list = null
              that.none = true
              that.$toast.clear();
            }
            if (res.data.meta.code == 200) {
              // if(res.data.data.length == 0){
              //   that.none = true
              // }
              that.list = res.data.data;
              that.none = false
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
              
            }
          }
        });
      }else{
        that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        diningId: localStorage.getItem("myshopid"),
        type: that.goodstp,
        classId:classid
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/product/checkProductList",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
              console.log(res.data, "foodlist");
            if(res.data.meta.code == 501){
              that.list = null
              that.none = true
              that.$toast.clear();
            }
            if (res.data.meta.code == 200) {
              // if(res.data.data.length == 0){
              //   that.none = true
              // }
              that.list = res.data.data;
              that.none = false
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
              
            }
          }
        });
      }
      
    },
    Suk_getlist() {
      
      let that = this;
     
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        dinId: localStorage.getItem("myshopid")
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/classs/queryClass", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data, "list");
              that.classid = res.data.data[0].classId
              that.items = res.data.data;
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    menu(e) {
      window.scrollTo(0, 0);
    },
    tosetdetail(index) {
      let that = this;
      localStorage.setItem('editfood',JSON.stringify(that.list[index]))
      this.$router.push({
        name: "setshopdetail"
      });
    },
    toaddnewgood() {
      this.$router.push({
        name: "addnewgood"
      });
    },
    //   这是到我们的分类管理页面去
    tosetclass() {
      let that = this;
      that.$router.push({
        name: "setclass"
      });
    },
    onChange(key) {
      let that = this
      that.activeKey = key;
      // console.log(key)
      // console.log(that.items[key].classId,'classid')
      that.classid = that.items[key].classId
      that.Suk_getfoodlist()
    },
    // 切换上架下架
    changetab() {
      let that = this;
      if (that.active == 0) {
        // that.Suk_getfoodlistall()
        that.classid = null
        that.goodstp = null
        that.Suk_getfoodlist()
      } else if (that.active == 1) {
        that.goodstp = 1
        that.Suk_getfoodlist()
      } else if (that.active == 2) {
        that.goodstp = 0
        that.Suk_getfoodlist()
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.goodtplist {
  display: inline-block;
  width: 100%;
  text-align: center;
  .tplist {
    width: 100%;
    border: none;
  }
}

.goodlist {
  display: inline-block;
  width: 75%;
  float: right;
  margin-top: 0.1rem;
  padding-bottom: 3rem;
}

.goodlistboxs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.2rem;
  .gooddesc {
    width: 35%;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .goodname {
      font-size: 0.4rem;
      color: #000;
    }
    .goodmoney {
      color: red;
    }
  }
}

.goodlistright {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    vertical-align: center;
    color: #fe9a0f;
  }
  .righticon {
    text-indent: 0.05rem;
    vertical-align: center;
  }
}

.goodimg {
  width: 2.75rem;
  height: 2.233rem;
  img {
    width: 100%;
    height: 100%;
  }
}

.goodlistbottom {
  position: relative;
  height: 0.7rem;
  border-bottom: 1px solid #f0f0f0;
  div {
    width: 20%;
    background: red;
    color: #ffffff;
    text-align: center;
    margin-top: 0.1rem;
    border-radius: 0.1rem;
    position: absolute;
    right: 0.3rem;
  }
}

.fixed {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  left: 0;
  bottom: 2.5rem;
  width: 2rem;
  height: 2rem;
  background: #f0f0f0;
  text-align: center;
  .fixedimg {
    width: 50%;
    height: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.fixed2 {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  left: 0;
  bottom: 5rem;
  width: 2rem;
  height: 2rem;
  background: #f0f0f0;
  text-align: center;
  .fixedimg {
    width: 50%;
    height: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.affix {
  display: inline-block;
  width: 25%;
}
.noneimg{
  width: 100%
}
</style>